<template>
	<view>
		<view class="header">
			<u-navbar
				:background="{ backgroundColor: '#3478f2' }"
				back-icon-color="#fff"
				back-icon-name="arrow-left"
				back-icon-size="40"
				title="实名申请"
				title-color="#fff"
				title-size="40"
				title-bold
				:customBack="handleNavBack"
			></u-navbar>
		</view>
		<scroll-view scroll-top="0" scroll-y="true" :style="`height:${scrollHeight}px`">
			<view class="content">
				<view class="top">
					<view class="top_item">
						<view class="circle active">
							<image class="img" src="/static/icon/shimingbai.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text active">实名申请</text>
					</view>
					<view class="top_item">
						<view class="circle">
							<image class="img" style="margin-left: 8rpx" src="/static/icon/tianxiehui.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text">填写借款资料</text>
					</view>
					<view class="top_item">
						<view class="circle">
							<image class="img" src="/static/icon/fangkuanhui.png" lazy-load="false"></image>
						</view>
						<text class="top_item_text">审核放款</text>
					</view>
				</view>
				<view class="gou">一分钟填写借款资料，极速下款最高20万</view>
				<view class="p-24">
					<view class="title">
						<text class="">*</text>
						<view class="title_dec">实名申请</view>
					</view>
					<u-field v-model="form.name" label="真实姓名" input-align="right" maxlength="10" clearable placeholder="请输入您的真实姓名"></u-field>
					<u-field v-model="form.idcard" label="身份证" input-align="right" maxlength="18" clearable placeholder="请输入您的身份证号"></u-field>
					<u-cell-group :border="false">
						<u-cell-item
							title="当前所在城市"
							hover-class="none"
							@click="showCity = true"
							:valueStyle="{ color: form.cityName == '' ? '#909399' : '#333333' }"
							:value="form.cityName || '请选择'"
						></u-cell-item>
						<u-cell-item
							title="职业信息"
							hover-class="none"
							@click="occupation = true"
							:valueStyle="{ color: form.occupation == '' ? '#909399' : '#333333' }"
							:value="form.occupation.label || '请选择'"
						></u-cell-item>
					</u-cell-group>
					<template v-if="form.occupation.value == 1 || form.occupation.value == 2">
						<itemInput label="月收入" maxlength="5" placeholder="请输入0~50000区间" unit="元/月" @input="onInput" />
						<view class="input_box u-border-bottom">
							<view class="input_box_title">工龄</view>
							<view class="input_box_val">
								<text v-for="(item, index) in workingData" :key="index" @click="handleItem(index, 'workingData')" :class="{ active: item.falg }">
									{{ item.label }}
								</text>
							</view>
						</view>
						<view class="input_box u-border-bottom">
							<view class="input_box_title">工资发放形式</view>
							<view class="input_box_val">
								<text v-for="(item, index) in block" :key="index" @click="handleItem(index, 'block')" :class="{ active: item.falg }">{{ item.label }}</text>
							</view>
						</view>
					</template>
					<template v-if="form.occupation.value == 3">
						<itemInput label="总经营流水" :key="form.occupation.value" maxlength="5" placeholder="请输入0~50000区间" unit="万元/月" @input="onInput" />
						<itemInput
							label="对公账户经营收入"
							:key="form.occupation.value + 1"
							maxlength="5"
							placeholder="请输入0~50000区间"
							unit="万元/月"
							@input="onInput2"
						/>
						<view class="input_box_line u-border-bottom">
							<view class="input_box_title">营业执照注册年限</view>
							<view class="input_box_val">
								<text v-for="(item, index) in permit" :key="index" :class="{ active: item.falg }" @click="handleItem(index, 'permit')">{{ item.label }}</text>
							</view>
						</view>
					</template>
					<template v-if="form.occupation.value == 4">
						<itemInput label="总经营流水" :key="form.occupation.value" maxlength="5" placeholder="请输入0~50000区间" unit="万元/月" @input="onInput" />
						<view class="input_box_line u-border-bottom">
							<view class="input_box_title">营业执照注册年限</view>
							<view class="input_box_val">
								<text v-for="(item, index) in permit" :key="index" :class="{ active: item.falg }" @click="handleItem(index, 'permit')">{{ item.label }}</text>
							</view>
						</view>
					</template>
					<template v-if="form.occupation.value == 5 || form.occupation.value == 6">
						<itemInput label="月收入" @input="onInput" :key="form.occupation.value" placeholder="请输入0~50000区间" unit="元/月" />
					</template>
					<view class="tips">
						<image src="/static/icon/dunpai.png" mode="scaleToFill" />
						<text>国家级数据加密保护，仅用于贷款审核</text>
					</view>

					<view class="btn" v-if="!isActive">下一步</view>
					<view class="btn2" v-else @click="openView">下一步</view>
				</view>
				<u-select v-model="showCity" mode="mutil-column-auto" :list="cityList" @confirm="confirm"></u-select>
				<u-select v-model="occupation" mode="single-column" :list="occupationDate" @confirm="handleOccupationConfirm"></u-select>
				<uni-popup ref="popup" :mask-click="false" type="center">
					<view class="pop">
						<image src="/static/icon/tishi.png" class="pop_img" />
						<view class="pop_text">该项认证非常重要，仅用作借款 审核，不完成将无法借款，确定 要放弃吗?</view>
						<button class="pop_conform" @click="commit">继续借款</button>
						<view class="pop_b">
							<text @click="handleBack">暂时放弃</text>
						</view>
					</view>
				</uni-popup>
				<uni-popup ref="popup1" :mask-click="false" type="center">
					<view class="pop">
						<image src="/static/icon/shan_dian.png" class="shan_dian" mode="scaleToFill" />
						<view class="pop_title">为您推荐极速贷款</view>
						<view class="pop_dec">操作简单，下款快</view>
						<view class="pop_product">
							<view class="product_img">
								<!-- <image :src="oneDatelogo" mode="scaleToFill" /> -->
							</view>
							<view class="product_name">{{ oneDate.name }}</view>
							<view class="product_dec">
								<text>￥</text>
								<text>最高额度{{ oneDate.quota_max }}万</text>
							</view>
						</view>
						<button class="pop_conform" @click="commit">立即申请</button>
						<view class="pop_b">
							<text @click="navBack">返回首页</text>
						</view>
					</view>
				</uni-popup>
				<view class="fixedView"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import city from '@/utils/city.json'
import ajax from '@/api'
import itemInput from '@/pages/auth/components/item-input.vue'
import { mixin } from '@/utils/mixins'
export default {
	mixins: [mixin],
	components: {
		itemInput
	},
	data() {
		return {
			oneDate: {},
			workingData: [
				{ value: '1', label: '0-6个月', falg: false },
				{ value: '2', label: '6-12个月', falg: false },
				{ value: '3', label: '12个月以上', falg: false }
			],
			working: false,
			money: '',
			block: [
				{ label: '银行卡', value: 1, falg: false },
				{ label: '现金', value: 2, falg: false },
				{ label: '自存', value: 3, falg: false }
			],
			permit: [
				{ label: '未注册', value: 1, falg: false },
				{ label: '注册1年以下', value: 2, falg: false },
				{ label: '注册1~5年', value: 3, falg: false },
				{ label: '注册5年以上', value: 4, falg: false }
			],
			form: {
				name: '',
				idcard: '',
				income: '',
				income_g: '',
				cityName: '', //所在城市
				occupation: '' //职业
			},
			checked: true,
			agreement: true,
			showDow: false,
			occupation: false,
			credit: false,
			occupationDate: [
				{
					value: '1',
					label: '上班族'
				},
				{
					value: '2',
					label: '公务员'
				},
				{
					value: '3',
					label: '企业主'
				},
				{
					value: '4',
					label: '个体户'
				},
				{
					value: '5',
					label: '自由职业'
				},
				{
					value: '6',
					label: '其他'
				}
			],
			sesame: false,
			showCity: false,
			cityList: city,
			numList: [
				{
					name: '实名申请'
				},
				{
					name: '填写借款资料'
				},
				{
					name: '审核放款'
				}
			],
			mobile: '',
			code: ''
		}
	},
	computed: {
		isActive() {
			let bool = false
			let data = JSON.parse(JSON.stringify(this.form))
			delete data.income_g
			delete data.income
			let key = Object.values(data)
			if (!key.includes('')) {
				if (this.form.occupation.value == 1 || this.form.occupation.value == 2) {
					let data = this.block.filter((item) => item.falg == true)
					let data2 = this.workingData.filter((item) => item.falg == true)
					if (data.length && data2.length && this.form.income != '') {
						bool = true
					}
				}
				if (this.form.occupation.value == 3 || this.form.occupation.value == 4) {
					let data = this.permit.filter((item) => item.falg == true)
					if (this.form.occupation.value == 3 && this.form.income_g != '' && data.length && this.form.income != '') {
						bool = true
					}
					if (this.form.occupation.value == 4 && this.form.income != '') {
						bool = true
					}
				}
				if (this.form.occupation.value == 5 || (this.form.occupation.value == 6 && this.form.income != '')) {
					bool = true
				}
			}
			return bool
		}
	},
	onLoad(ops) {
		const { money } = ops
		this.money = money
	},
	methods: {
		handleNavBack() {
			this.$refs.popup.open()
		},
		async handleBack() {
			this.$refs.popup.close()
			try {
				const data = await ajax.getOnLine()
				//如果没获取到产品直接返回
				if (data.is_cp == 2) {
					this.navBack()
				} else {
					this.oneDate = data.list
					this.$refs.popup1.open()
				}
			} catch (error) {
				this.navBack()
			}
		},
		navBack() {
			uni.navigateBack()
		},
		open() {
			this.$refs.popup.open()
		},
		commit() {
			this.$refs.popup.close()
			this.$refs.popup1.close()
		},
		popupClose() {
			if (!this.checked) {
				this.showDow = true
			}
		},
		handleItem(index, name) {
			this[name].forEach((item) => (item.falg = false))
			this[name][index].falg = true
		},
		onInput(item) {
			this.form.income = item
		},
		onInput2(item) {
			this.form.income_g = item
		},
		confirm(item) {
			this.form.cityName = `${item[0].label}-${item[1].label}`
		},
		handleCreditConfirm(item) {
			this.form.credit = item[0]
		},
		handleSesameConfirm(item) {
			this.form.sesame = item[0]
		},
		handleOccupationConfirm(item) {
			this.block.forEach((item) => (item.falg = false))
			this.permit.forEach((item) => (item.falg = false))
			this.form.occupation = item[0]
		},
		async openView() {
			let params = {
				name: this.form.name,
				city: this.form.cityName,
				vocation: this.form.occupation.value,
				money: this.money,
				income: this.form.income,
				idcard: this.form.idcard
			}
			if (!this.$u.test.chinese(this.form.name) || !this.$u.test.range(this.form.name.length, [2, 10])) {
				uni.showToast({
					title: '请输入合法姓名',
					icon: 'none'
				})
				return
			}
			if (!this.$u.test.idCard(this.form.idcard)) {
				uni.showToast({
					title: '请输入合法身份证号',
					icon: 'none'
				})
				return
			}
			if (this.form.occupation == '') {
				uni.showToast({
					title: '请选职业',
					icon: 'none'
				})
				return
			}
			if (this.form.income == '') {
				const txt = this.form.occupation.value == 3 || this.form.occupation.value == 4 ? '请输入总经营流水' : '请输入收入信息'
				uni.showToast({
					title: txt,
					icon: 'none'
				})
				return
			}
			if (this.form.occupation.value == 1 || this.form.occupation.value == 2) {
				let data = this.block.filter((item) => item.falg == true)
				let data2 = this.workingData.filter((item) => item.falg == true)
				if (!data.length) {
					uni.showToast({
						title: '请选择工资发放形式',
						icon: 'none'
					})
					return
				}
				if (!data2.length) {
					uni.showToast({
						title: '请选择工龄',
						icon: 'none'
					})
					return
				}
				params.wages = data[0].value
				params.working = data2[0].value
			}
			if (this.form.occupation.value == 3 && this.form.income_g == '') {
				uni.showToast({
					title: '请输入对公账户经营收入',
					icon: 'none'
				})
				return
			}
			if (this.form.occupation.value == 3) {
				params.income_g = this.form.income_g
			}
			if (this.form.occupation.value == 3 || this.form.occupation.value == 4) {
				// permit
				let data = this.permit.filter((item) => item.falg == true)
				if (!data.length) {
					uni.showToast({
						title: '请选择营业执照注册年限',
						icon: 'none'
					})
					return
				}
				params.business = data[0].value
			}
			try {
				await ajax.postAuth(params)
				uni.navigateTo({
					url: '/pages/auth/property'
				})
			} catch (error) {
				console.log(error)
			}
		}
	}
}
</script>

<style lang="scss">
.tips {
	margin-top: 272rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #bba66d;
	image {
		width: 24rpx;
		height: 28rpx;
		margin-right: 12rpx;
	}
}
::v-deep .u-label {
	font-size: 14px;
	color: #606266;
}
::v-deep .u-field {
	padding: 13px 16px;
	line-height: 27px;
}
.product_dec {
	margin-top: 4rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product_dec text:nth-of-type(1) {
	width: 40rpx;
	height: 40rpx;
	background: #ffb341;
	border-radius: 50%;
	font-size: 28rpx;
	text-align: center;
	line-height: 40rpx;
	color: #fff;
}
.product_dec text:nth-of-type(2) {
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: 800;
	margin-left: 12rpx;
	color: #fc1f1f;
}
.pop {
	width: 606rpx;
	border-radius: 16rpx;
	background-color: #ffffff;
	position: relative;
	padding: 62rpx 0;
	text-align: center;
	.shan_dian {
		width: 138rpx;
		height: 274rpx;
		position: absolute;
		left: 0;
		top: 0;
	}
	.pop_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.pop_dec {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #0780fe;
	}
	.pop_product {
		margin-top: 28rpx;
		.product_img {
			width: 112rpx;
			height: 112rpx;
			border-radius: 8rpx;
			margin: 12rpx auto;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.product_name {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.pop_b {
		margin-top: 64rpx;
		display: flex;
		justify-content: center;
		flex: 1;
		text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #696969;
		}
	}
	.pop_img {
		width: 161rpx;
		height: 157rpx;
	}
	.pop_text {
		width: 448rpx;
		margin: 0 auto;
		font-size: 32rpx;
		margin-top: 40rpx;
		color: #333;
	}
	.pop_ipt {
		display: block;
		box-sizing: border-box;
		margin: 0 auto;
		width: 448rpx;
		height: 80rpx;
		line-height: 40px;
		margin-top: 24rpx;
		padding-top: 10rpx;
	}
	.pop_conform {
		margin-top: 40rpx;
		width: 448rpx;
		height: 88rpx;
		background-color: #3478f2;
		font-size: 36rpx;
		color: #ffffff;
		border-radius: 16rpx;
		font-family: PingFang SC;
		font-weight: 400;
	}
	.pop_conform:active {
		opacity: 0.5;
	}
	.pop_out {
		position: absolute;
		width: 64rpx;
		height: 64rpx;
		top: -84rpx;
		right: -20rpx;
	}
}
::v-deep .u-field {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
}
::v-deep .uicon-checkbox-mark:before {
	margin-left: 20rpx;
}
page {
	height: 100vh;
	background-color: #fff;
}
.agreement_box {
	overflow: hidden;
	padding-bottom: 20rpx;
}
.top_item_text {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
	margin-top: 8rpx;
}
.top_item_text.active {
	color: #3478f2;
}
.img {
	width: 60rpx;
	height: 60rpx;
}
.circle {
	width: 88rpx;
	height: 88rpx;
	border-radius: 100%;
	background: #e4e4e4;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.circle.active {
	background: #3478f2;
}
.circle::after {
	position: absolute;
	content: '';
	width: 200rpx;
	height: 8rpx;
	background: #d9d9d9;
	top: 50%;
	left: 87rpx;
}
.circle.active::after {
	background: #3478f2;
}
.top_item:last-child .circle::after {
	height: 0rpx;
}
.input_box_line {
	padding: 32rpx 0;
	font-size: 28rpx;
	padding-left: 16px !important;
	padding-right: 32rpx;
	color: #606266;
	.input_box_val {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text {
			width: 150rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #ffffff;
			border: 1rpx solid #bdbdbd;
			border-radius: 36rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #bdbdbd;
		}
	}
}
.input_box .input_box_val text.active,
.input_box_line .input_box_val text.active {
	background: #eef4fe;
	border: 2rpx solid #3478f2;
	color: #3478f2;
}
.input_box {
	display: flex;
	align-items: center;
	padding: 32rpx 0;
	font-size: 28rpx;
	padding-left: 28rpx;
	padding-right: 32rpx;
	color: #606266;
	.input_box_title {
		font-family: PingFang SC;
		font-weight: 400;
		width: 55%;
	}
	.input_box_val {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 800rpx;
		text {
			width: 136rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: #ffffff;
			border: 1rpx solid #bdbdbd;
			border-radius: 36rpx;
			text-align: center;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #bdbdbd;
		}
	}
}
.agreement_flex {
	margin-top: 36rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
		margin-left: -20rpx;
	}
}
.agreement_bten {
	height: 70rpx;
	line-height: 70rpx;
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #3478f2;
	text-align: center;
}
.divider {
	width: 564rpx;
	height: 2rpx;
	background: #e4e4e4;
	margin: 20rpx auto;
}
.agreement_content {
	padding: 10rpx 24rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 56rpx;
	color: #151515;
}
.agreement_title {
	font-size: 40rpx;
	margin-top: 50rpx;
	font-family: PingFang SC;
	font-weight: bold;
	text-align: center;
	color: #333333;
}
.agreement_dec {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	margin-top: 40rpx;
	text-align: center;
	color: #333333;
}
.dow_box {
	padding: 38rpx 0;
	text-align: center;
	.dow_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	.deposit_btn {
		width: 372rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #3478f2;
		border-radius: 36rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		margin: 44rpx auto;
	}
	.edit_btn {
		width: 372rpx;
		height: 72rpx;
		background: #ffffff;
		border: 2rpx solid #3478f2;
		border-radius: 36rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
		margin: 0 auto;
		line-height: 72rpx;
	}
	.dec {
		margin-top: 16rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}
}
.title {
	margin-left: 12rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: flex-start;
	text {
		color: red;
	}
}
.title_dec {
	font-size: 40rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	position: relative;
}
.title_dec::after {
	position: absolute;
	content: '';
	width: 38rpx;
	height: 4rpx;
	background: #3478f2;
	left: 0;
	bottom: -6rpx;
}
.gou {
	width: 750rpx;
	height: 64rpx;
	background: #e4eeff;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3478f2;
	line-height: 64rpx;
	text-align: center;
}
.btn {
	width: 652rpx;
	height: 92rpx;
	line-height: 92rpx;
	background: #cccccc;
	border-radius: 44rpx;
	margin: 60rpx auto;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
}
.btn2 {
	width: 652rpx;
	height: 92rpx;
	line-height: 92rpx;
	background: linear-gradient(270deg, #0481fe 0%, #40c5fe 100%);
	border-radius: 70rpx;
	text-align: center;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #ffffff;
	margin: 60rpx auto;
}
.top {
	width: 750rpx;
	height: 180rpx;
	background: #ffffff;
	border-radius: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 52rpx;
}
.p-24 {
	padding: 24rpx;
	background-color: #fff;
}
</style>
